 <!--
 * @Descripttion: 财务会记->财务报表->资产负债
 * @Author: GaoWei
 * @Date: 2021-04-25 12:11:55
 * @LastEditors: GaoWei
 * @LastEditTime: 2021-06-03 17:03:07
-->

<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper" style="border: 1px solid #ccc">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix" style="  border-bottom: 1px solid #ddd;">
                <a-row class="text-center clearfix">
                    <a-col :xs="25" :sm="25" :md="25" :lg="16" :xl="12">

                        <!-- v-show="design" -->
                        <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" v-if="design">
                            <div style="position:relative">
                                <div class="btns" style="display:block;margin-left:10px">
                                    <a-icon class="btns-icon" type="form" />
                                    <div class="btns-text" @click="gettabList">设计</div>
                                </div>
                            </div>
                        </a-col>

                        <!-- v-show="preservtion" -->
                        <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" v-if="preservtion">
                            <div style="position:relative">
                                <div class="btns" style="display:block;margin-left:10px">
                                    <a-icon class="btns-icon" type="save" />
                                    <div class="btns-text" @click="gettabListq">保存</div>
                                </div>
                            </div>
                        </a-col>
                        <!-- v-show="design" -->
                        <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" v-if="design">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col>
                        <!-- v-show="design" -->
                        <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" v-if="design">
                            <div style="position:relative">
                                <div class="btns">
                                    <a-icon class="btns-icon" type="download" />
                                    <div class="btns-text">导出</div>
                                </div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>

            <!-- 设计表列表 -->
            <div class='priret-list'>
                <div class='priret-left'>
                    <span class="priret-list-left">
                        {{years}}
                    </span>
                    <div class="priret-list-txt" v-for="(item,index) in mouth_list" @click="timeClick(item.code)">
                        <div :class="index == databases.accountPeriod-1 ? 'priret-border' : ''">
                            {{item.thsiTime}}
                        </div>
                    </div>
                </div>

                <div class="priret-right">
                    <a-checkbox v-model:checked="checked">未包含记账凭证</a-checkbox>
                </div>
            </div>

            <div ref="print" class="credentials-wrapper" v-show="show" style="margin-left:">
                <div class="tablePos">
                    <!-- 表头 -->

                    <!-- 状态 -->
                    <!-- <div class="status-style">
                        <span>不平衡</span>
                    </div> -->

                    <!-- 表体 -->

                    <div style="position: relative;">
                        <!-- 状态遮罩层 -->
                        <div class="fiexd-box" v-if="design"></div>
                        <table :class="countNumver == 1 ? 'talbeNmaeone' : countNumver == 2 ? 'talbeNmaetow' : 'talbeNmae' " id="table_courseS" :scroll="{ x: 300, y: 1000}">
                            <tr class="toplist">
                                <td colspan="9">
                                    <div contenteditable='true' style="height: 69px; font-size: 23px;">{{listTitle}}</div>
                                    <div>
                                        <div class="company">
                                            <span class="company-span-one" contenteditable='true'>编制单位：{{company}}</span>
                                            <span contenteditable='true'>时间：{{times}}</span>
                                            <span class="company-span-tow" contenteditable='true'>企汇表：{{remarks}}表</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>

                        <a-table id="table_course" bordered :data-source="dataSource" :columns="columns" :customRow="customClick" :rowClassName="rowClassName" :pagination="false" :scroll="{ x: 200, y: 650}">
                            <template v-for="(item,index) in slotArray" :slot="item" slot-scope="text, record,index">
                                <editable-cell @calculationlist="calculationlistclick" @runDataTale="runDataTale" @trademark="trademark" v-if="isRouterAlive" v-on:validate="validate" :text="text" :col="item" :record="record" :listNumber="listNumber" :doindex="index" @change="onCellChange(index, item , $event)" />
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>

            <!-- 右键菜单 -->
            <div class="contextmenu-box">
                <ul v-show="nvmu" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
                    <li @click="handleAdd()">新增行</li>
                    <li @click="handleDelete()">删除行</li>
                </ul>
            </div>
        </div>

        <!--用做横向打印-->
        <div v-html="stylePrint"></div>

        <!-- 查询弹窗 -->
        <div>
            <a-modal v-model="visibles" title="资产负债表查询">
                <template slot="footer">
                    <a-button key="back" @click="handleCancel">
                        关闭
                    </a-button>
                    <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                        查询
                    </a-button>
                </template>
                <div>
                    <span>会计期间：</span>
                    <span style="margin-left:12px">
                        <a-date-picker format="YYYY-MM-DD" placeholder="请选择业务日期" @change="onChangeBusinessDate" v-model="dataTimes" />
                    </span>
                </div>
                <br>
                <div>
                    <span>未记账凭证：</span>
                    <a-checkbox v-model="chebox">
                    </a-checkbox>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
const dataSource = [];

import editableCell from "@/components/Finance/liaBilitiesEdit/liaBilitiesEdit";
import { save, getFormulaList, getAssetsLiabilities, periodlist } from '@/api/finance/liablities/liablitieslist';
import searchGroupHeader from "@/components/PopUpLayer/searchGroupHeader";
import FormSearchGroup from '@/components/Form/FormSearchGroup';
import { Controlwidth } from "@/utils/antTableComponents";

export default {
    components: {
        editableCell,
        searchGroupHeader,
        FormSearchGroup,
    },
    updated () {
        Controlwidth("table_course", 50);
    },
    data () {

        return {
            checked: false,
            years: '',
            dataSourceLength: 40,//表格数量
            topList: ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],    //表头领标
            topLists: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],    //表头领标
            mouth_list: [
                { thsiTime: '1月', code: 1 },
                { thsiTime: '2月', code: 2 },
                { thsiTime: '3月', code: 3 },
                { thsiTime: '4月', code: 4 },
                { thsiTime: '5月', code: 5 },
                { thsiTime: '6月', code: 6 },
                { thsiTime: '7月', code: 7 },
                { thsiTime: '8月', code: 8 },
                { thsiTime: '9月', code: 9 },
                { thsiTime: '10月', code: 10 },
                { thsiTime: '11月', code: 11 },
                { thsiTime: '12月', code: 12 }
            ],
            listTitle: '资产负债表',
            remarks: '01',
            company: '',
            unit: '369.5',
            times: '',
            slotArray: [],
            listArray: [],
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            grid: {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8,
                xl: 8,
                xxl: 8
            },
            isRouterAlive: true, // 强制刷新
            //----------↑样式----------
            dataSource: dataSource, // 数据数组
            count: 2, // 添加行

            columns: [
                {
                    title: '',
                    dataIndex: 'index',
                    align: 'center',
                    width: 40,
                    fixed: true,
                    scopedSlots: { customRender: 'index' },
                },
                {
                    title: 'A',
                    dataIndex: 'Assets',
                    width: 260,
                    align: 'left',
                    resizable: true,
                    scopedSlots: { customRender: 'Assets' },
                },
                {
                    title: 'B',
                    dataIndex: 'LineNoOne',
                    width: 50,
                    align: 'center',
                    resizable: true,
                    scopedSlots: { customRender: 'LineNoOne' },
                },
                {
                    title: 'C',
                    dataIndex: 'FinaltermOne',
                    width: 130,
                    align: 'right',
                    scopedSlots: { customRender: 'FinaltermOne' },
                },
                {
                    title: 'D',
                    dataIndex: 'BeginningOne',
                    width: 130,
                    align: 'right',
                    scopedSlots: { customRender: 'BeginningOne' },
                },
                {
                    title: 'E',
                    dataIndex: 'Liabilities',
                    width: 260,
                    align: 'center',
                    scopedSlots: { customRender: 'Liabilities' },
                },
                {
                    title: 'F',
                    dataIndex: 'LineNoTow',
                    width: 50,
                    align: 'center',
                    scopedSlots: { customRender: 'LineNoTow' },
                },
                {
                    title: 'G',
                    dataIndex: 'FinaltermTow',
                    width: 130,
                    align: 'right',
                    scopedSlots: { customRender: 'FinaltermTow' },
                },
                {
                    title: 'H',
                    dataIndex: 'BeginningTow',
                    width: 130,
                    align: 'right',
                    scopedSlots: { customRender: 'BeginningTow' },
                }
            ],

            list: ['Assets', 'LineNoOne', 'FinaltermOne', 'BeginningOne', 'Liabilities', 'LineNoTow', 'FinaltermTow', 'BeginningTow'],
            status: false, // 查询按钮隐藏
            visibles: false, // 查询弹窗隐藏
            show: true, // 设计表的隐藏
            showtow: false, // 浏览表格隐藏
            preservtion: false, // 保存按钮隐藏
            design: true, //设计按钮隐藏
            runData: [],
            runSon: [],
            runter: 0,
            dataTimes: '', // 时间
            chebox: '', //弹窗复选按钮
            nvmu: false,
            top: '', // 右键菜单坐标
            left: '', // 右键菜单坐标
            newData: [],
            databases: { 'type': 1, accountPeriod: 1 }, //默认时间
            thisClickId: null,
            currentIndexTable: null,     //当前点击的行下标
            allList: [], // 初始保存数据
            listNumber: 0,  //获取列表行数
            singlestr: '', // 获取单个数据
            newtables: '',
            unm: 0,
            thisRunData: [],
            Illiquid: '', // 非流动资产合计
            Totalassets: '', // 资产总合计
            TotalEquity: '', // 所有者权益合计
            total: '', //总计
            rundata: '',
            rouDatas: [],
            Trademark: '', //单元格标识
            Rowvalue: '', //单元格公式值
            oldList: [],    // 表获取数据
            // 右键菜单事件
            customClick: (item, index) => ({
                on: {
                    contextmenu: (e) => {//右键事件
                        e.preventDefault();
                        this.openMenu(e);
                        this.thisClickId = item.index;
                        console.log('右键点击的', this.thisClickId, item);

                    },
                    click: () => {
                        this.currentIndexTable = index;
                        // console.log('当前点击的行下标/列', this.currentIndexTable)
                    }
                },
            }),

            countNumver: '', // 计算宽度


        }

    },
    created () {
        this.slotArray = [];
        this.years = new Date().getFullYear();
        this.columns.forEach(item => {
            if (item.scopedSlots) {
                this.slotArray.push(item.scopedSlots.customRender)
            }
        });

        // 获取期间
        periodlist().then((stal) => {
            // 表格回显
            this.postHttp(this.databases);
        })


    },
    // 获取页面事件，对右键菜单进行显示隐藏
    watch: {
        nvmu (value) {
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        }
    },

    methods: {
        // 查询某月
        timeClick (val) {
            this.databases.accountPeriod = val;
            this.postHttp(this.databases);
        },

        // 计算处理
        SymbolHandle (StringCode, valueList) {
            for (let i = 0; i <= valueList.length; i++) {
                valueList.forEach(item => {
                    if (item.value) {
                        StringCode = StringCode.replace(item.columns + item.line, item.value);
                    } else {
                        StringCode = StringCode.replace(item.columns + item.line, 0)
                    }
                })
            }

            try {
                return eval(StringCode)
            }
            catch (err) {
                return '#NAME?'
            }
        },

        // 回显表格
        postHttp (Times) {
            getAssetsLiabilities(Times).then((rst) => {
                if (rst.code == 200) {

                    this.oldList = rst.data;
                    let strlength = 0;
                    let maxNumber = '';

                    this.listArray = [];
                    this.allList = [];
                    if (rst.data.length > 0) {
                        maxNumber = rst.data[0].line;
                    }

                    // 计算 
                    for (let obj = 0; obj < rst.data.length; obj++) {
                        if (rst.data[obj]['valueType'] == 3 && rst.data[obj]['type'] == 1) {
                            rst.data[obj]['value'] = this.SymbolHandle(rst.data[obj].formula, rst.data);
                        }
                    }

                    // 判断总行数
                    for (let index = 0; index < rst.data.length; index++) {
                        if (maxNumber < rst.data[index].line) {
                            maxNumber = rst.data[index].line;
                        }

                    }

                    strlength = maxNumber;

                    if (strlength === 0) {
                        strlength = 30;
                    }
                    this.listNumber = strlength;
                    let newdataSource = [];
                    for (let j = 5; j <= strlength; j++) {
                        let item = {};
                        this.runter++;
                        if (this.runter == 9) {
                            this.runter = 0;
                        }
                        for (let i = 0; i < rst.data.length; i++) { // 数据循环
                            if (rst.data[i].type == 1) {
                                // this.newData[i] = rst.data[i];
                                for (let k = 0; k < this.topLists.length; k++) {  // 表头循环，拼接数据
                                    if (rst.data[i].line == j && rst.data[i].columns == this.topLists[k]) {
                                        item[this.list[k]] = rst.data[i].value;
                                        item[rst.data[i].columns + 'id'] = rst.data[i].id;
                                    }
                                }
                            }
                        }
                        // item['index'] = j + 4;
                        item['index'] = j;

                        newdataSource.push(item);
                    }

                    // for (let i in rst.data) {
                    //     if (rst.data[i].type == 1) {
                    //         this.allList.push(rst.data[i]);
                    //     }
                    // }
                    this.dataSource = newdataSource;
                    this.dataSource.unshift(
                        {
                            index: 4,
                            Assets: '资产',
                            LineNoOne: '行次',
                            FinaltermOne: '期末余额',
                            BeginningOne: '年初余额',
                            Liabilities: '负债和所有者权益',
                            LineNoTow: '行次',
                            FinaltermTow: '期末余额',
                            BeginningTow: '年初余额'
                        },
                    );
                    this.dataSource.unshift({ index: 3 });
                    this.dataSource.unshift({ index: 2 });
                    this.dataSource.unshift({ index: 1 });

                    let arrayUnber = this.dataSource[this.dataSource.length - 1];
                    let hangNumber = 30 - this.dataSource.length;

                    if (hangNumber >= 0) {
                        for (let i = 1; i < hangNumber; i++) {
                            this.dataSource.push({ index: arrayUnber.index + i });
                        }
                    }
                     this.listNumber = this.dataSource.length;
                    if (this.dataSource.length > 10 && this.dataSource.length < 99) {
                        this.columns[0].width = 60;
                        this.countNumver = 1;
                    }

                    if (this.dataSource.length > 99) {
                        this.columns[0].width = 80;
                        this.countNumver = 2;
                    }


                    this.reload();

                }
            })

        },

        //显示右键菜单
        openMenu (e) {
            var x = e.pageX - 250;
            var y = e.pageY - 40;
            this.top = y;
            this.left = x;
            this.nvmu = true;
        },

        //隐藏右键菜单
        closeMenu () {
            this.nvmu = false;
        },

        //新增数据
        handleAdd (line) {
            const { count, dataSource } = this;
            console.log(this.dataSource.length)
            this.$nextTick(() => {
                this.dataSource.splice(this.dataSource.length, 0, { 'index': this.dataSource.length + 1, 'Assets': '', 'LineNoOne': '', 'FinaltermOne': '', 'BeginningOne': '', 'Liabilities': '', 'LineNoTow': '', 'FinaltermTow': '', 'BeginningTow': '', });
            })
        },

        //删除整行
        handleDelete () {
            let _this = this;
            let numberId = this.thisClickId;
            this.$confirm({
                title: "确认",
                content: (
                    <span>
                        您确定要{<span style="color:red;">删除</span>}该记录吗？
                    </span>
                ),
                onOk () {
                    _this.oldList = _this.oldList.filter((item, index) => item.line != _this.thisClickId);
                    if (_this.oldList.length > 0) {
                        let i = 5;
                        _this.oldList.forEach((item, index) => {
                            item.line = i;
                            if ((index + 1) % 8 == 0) {
                                i++;
                            }
                        })
                    }

                    console.log(_this.oldList)

                    save(_this.oldList).then((rst) => {
                        if (rst.code == 200) {
                            setTimeout(() => {
                                _this.$message.success(`已删除`);
                                _this.postHttp(_this.databases);
                            })
                        }
                    })
                    _this.reload()
                },
                onCancel () { },
            });

        },

        //强制刷新表格
        reload () {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        },

        // 表格切换
        gettabList () {
            this.showtow = false;
            this.show = true;
            this.status = false;
            this.preservtion = true;
            this.design = false;
        },

        //打印
        printOrder () {
            this.$print(this.$refs.print);
        },

        //业务时间改变
        onChangeBusinessDate (e, v) {
            this.dataTimes = v.substr(5, 2);
            // console.log(this.dataTimes)
            this.times = v;
            // this.dataTimes = v;
        },

        // 获取列
        setIdlist (val) {
            if (val == this.list[0]) {
                return 'A'
            }
            if (val == this.list[1]) {
                return 'B'
            }
            if (val == this.list[2]) {
                return 'C'
            }
            if (val == this.list[3]) {
                return 'D'
            }
            if (val == this.list[4]) {
                return 'E'
            }
            if (val == this.list[5]) {
                return 'F'
            }
            if (val == this.list[6]) {
                return 'G'
            }
            if (val == this.list[7]) {
                return 'H'
            }
        },

        // 获取单元格参数
        onCellChange (index, dataIndex, value) {
            // 组装表格数据 
            let coldata = {};
            if (value !== undefined) {
                if (this.oldList.length != 0) {
                    let ate = this.oldList.filter((item) =>
                        this.setIdlist(dataIndex) == item.columns && item.line == (index + 1)
                    )
                    if (ate.length) {
                        this.oldList.forEach(item => {
                            if (this.setIdlist(dataIndex) == item.columns && item.line == (index + 1)) {
                                item.value = value;
                            }
                        })
                    } else {
                        coldata = {
                            accountYear: new Date().getFullYear(),
                            assetsLiabilitiesFormulas: null,
                            columns: this.setIdlist(dataIndex),
                            line: (index + 1),
                            type: 1,
                            value: value,
                            valueType: 1
                        }
                        this.oldList.push(coldata);
                    }
                } else {
                    console.log(3)
                    this.oldList = [];
                    coldata = {
                        accountYear: new Date().getFullYear(),
                        assetsLiabilitiesFormulas: null,
                        columns: this.setIdlist(dataIndex),
                        line: (index + 1),
                        type: 1,
                        value: value,
                        valueType: 1
                    }
                    this.oldList.push(coldata);
                }
            }

        },

        // 获取子组件数据
        runDataTale (top) {
            console.log('topdata---------------',top)
            let result = [];
            let runset = ['FinaltermOne', 'BeginningOne', 'FinaltermTow', 'BeginningTow'];
            let lielist = ['C', 'D', 'G', 'H'];
            this.thisRunData = top;
            for (let i = 0; i < top[0].length; i++) {
                result.push({
                    'accessRule': top[0][i].accessRule,
                    'accountingId': top[0][i].accountingId,
                    'accountingName': top[0][i].accountingName,
                    'operator': top[0][i].operator,
                    'uid': top[0][i].uid,
                    'id': top[0][i].id,
                    'type': 1,
                });
            }
            for (let index = 0; index < this.thisRunData[0].length; index++) {
                for (let k = 0; k < runset.length; k++) {
                    if (runset[k] == this.thisRunData[0][index].col) {
                        const data = {
                            'value': '',
                            'columns': lielist[k],
                            'line': Number(this.thisRunData[0][index].doindex +1),
                            'valueType': 2,
                            'assetsLiabilitiesFormulas': result,
                            'type': 1,
                        };
                        this.oldList.push(data);
                    }
                }
            }
        },

        // 公式计算保存刷新
        calculationlistclick (val) {
            this.postHttp(this.databases);
        },

        // 保存
        gettabListq () {
            this.oldList.forEach(item => {
                if (item.columns == 'A' || item.columns == 'E') {
                    item.value = item.value.replaceAll(' ', '-');
                }
            })
            save(this.oldList).then((rst) => {
                // this.allList = [];
                if (rst.code == 200) {
                    setTimeout(() => {
                        this.$message.success(`保存成功`);
                        this.preservtion = false;
                        this.design = true;
                    })
                    this.postHttp(this.databases);
                }
            })
            this.reload();
        },



    },
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';

    .fiexd-box {
        // border: 1px solid red;
        position: absolute;
        z-index: 3;
        height: 93%;
        width: 98%;
        margin-top: 30px;
    }

    .talbeNmaeone {
        width: calc(100% - 77px);
        border: 1px solid #cacaca;
        border-bottom: 0px;
        position: absolute;
        top: 30px;
        left: 60px;
        z-index: 2;
        background: #fff;
    }

    .talbeNmaetow {
        width: calc(100% - 57px);
        border: 1px solid #cacaca;
        border-bottom: 0px;
        position: absolute;
        top: 30px;
        left: 40px;
        z-index: 2;
        background: #fff;
    }
    .talbeNmae {
        width: calc(100% - 57px);
        border: 1px solid #cacaca;
        border-bottom: 0px;
        position: absolute;
        top: 30px;
        left: 40px;
        z-index: 2;
        background: #fff;
    }

    .status-style {
        position: relative;
        top: -61px;
        left: 85%;
        text-align: center;
        font-family: '黑体';
        border: 5px solid #ecb32b;
        background: #ecb32b;
        display: block;
        font-size: 16px;
        font-weight: 700;
        width: 90px;
        height: auto;
        line-height: 32px;
        padding: 0px 10px;
        margin-left: 16px;
        border-radius: 10px;
        z-index: 1;
        color: #fff;
        letter-spacing: 2px;
        //   background: rgba(238, 116, 116, 0.2);
        transform: rotate(-10deg);
        transition: all 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
        box-shadow: 0px 0px 6px 4px rgba(238, 116, 116, 0.2);
    }

    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        min-height: 350px;
        .date-tp {
            text-align: center;
            margin-bottom: 10px;
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            padding-bottom: 5px;
        }
        .subsidiary {
            border: 1px solid #cacaca;
            text-align: center;
            display: flex;
            .sub-title {
                flex: 0 0 26px;
                padding-top: 8px;
                border-right: 1px solid #cacaca;
            }
            .sub-content {
                flex: 1;
                text-align: left;
                .sub-list {
                    border-bottom: 1px solid #cacaca;
                    line-height: 32px;
                    .ant-col {
                        padding-left: 20px;
                    }
                }
                .sub-list:last-child {
                    border-bottom: none;
                }
            }
        }
        .total-box {
            border-left: 1px solid #cacaca;
            border-right: 1px solid #cacaca;
            border-bottom: 1px solid #cacaca;
            display: flex;
            line-height: 32px;
            text-align: center;
            font-size: 14px;
            .total-title {
                width: 77.2%;
                border-right: 1px solid #cacaca;
                box-sizing: content-box;
            }
            .total-borrow {
                width: 11.4%;
                border-right: 1px solid #cacaca;
            }
            .total-loan {
                width: 11.4%;
            }
        }
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .bills-box-header {
            display: flex;
            justify-content: space-around;
            .filter {
                display: table;
                width: 246px;
                margin-bottom: 5px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
            }
        }
        .ant-input-group-addon {
            border: 0px;
        }
    }

    .toplist {
        text-align: center;
    }

    .company-span-one {
        float: left;
        padding: 0 0 0 10px;
    }

    .company-span-tow {
        float: right;
        margin-right: 10px;
    }
    .solto {
        .ant-table-bordered .ant-table-tbody > tr > td,
        .ant-table-bordered .ant-table-thead > tr > th {
            //   border: 1px solid #cccccc;
        }
    }

    .tablePos {
        width: 75%;
        height: 100%;
        /* border: 1px solid red; */
        text-align: center;
        // margin: auto;
    }
    .formula {
        width: 100%;
        border: 1px solid #cacaca;
        border-bottom: 0;
        height: 31px;
        input {
            width: 100%;
            padding-top: 4px;
            border: 0;
            padding-left: 10px;
            outline: none;
            background-color: #fff;
        }
        div {
            float: left;
        }
    }
    .formuladiv {
        clear: both;
    }
    .formulaone {
        width: 15%;
        height: 30px;
    }
    .formulatow {
        width: 13%;
        height: 30px;
        padding-top: 4px;
        background-color: #eee;
        border: 1px solid #cacaca;
        border-top: 0;
        border-bottom: 0;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        //  border:1px solid black
    }
    .formulafreen {
        width: 72%;
        height: 30px;
        // border:1px solid black
    }

    .priret-list {
        width: 75%;
        margin-top: 20px;
        margin-bottom: 3px;
        display: flex;
        justify-content: space-between;
        .priret-left {
            display: flex;
        }
        .priret-list-txt {
            padding: 0 10px;
            display: flex;
        }

        .priret-list-left {
            padding: 0 20px;
        }

        .priret-border {
            color: #1890ff;
            border-bottom: 1px solid #1890ff;
        }

        .priret-right {
            //  position: relative;
            padding: 0 15px 0 0;
        }
    }
</style>
